import React from 'react'
import { Table,Row,Col,Button,Input,Icon,Modal } from 'antd'
import moment from "moment";
const confirm = Modal.confirm

class Organization extends React.Component {
	constructor(props){
		super(props)
		this.state = {
			name:'',
			number:'',
		}
	}

	nameChange=(e)=>{
  		this.setState({name:e.target.value})
  	}
	numberChange=(e)=>{
		this.setState({number:e.target.value})
	}
	searchLeave(){
		const { onSearch } = this.props
		const params = {}
		if(this.state.name != ''){
			params.name = this.state.name
		}
		if(this.state.number != ''){
			params.number = this.state.number
		}
		
		onSearch(params)
	}
	add(){
		const {showModals,showAllOrganization} = this.props
		showModals(true)
		showAllOrganization()
	}
    filterAry = (ary,first) => {
      (ary || []).forEach((val,index) => {
        if(val.children === null || val.children === undefined || val.children.length === 0){
          if(first === "first"){
            val.key = (index + 1);
          }else{
          	val.canMove = true
            val.key = ((first + "") + (index + 1 + ""))
          }
        }else{
          if(first === "first"){
            val.key = (index + 1);
          }else{
          	val.canMove = true
            val.key = ((first + "") + (index + 1 + ""))
          }
          return this.filterAry(val.children,val.key);
        }
      })
    }	
	edit(record,k){
		const { showDetails,deleteOrganization,showOrganization,removeOrganization } = this.props
		if(k == 1){
			showDetails(record.id,false)
			showOrganization(record.id)
		}else if(k == 2){
//			record.canMove 存在这个字段则说明是从机构移除,否则则是删除
			if(record.canMove){
				confirm({
					title:"您确定要移除该机构吗？",
					onOk(){
						removeOrganization(record.id)
					}
					
				})
			}else{
				confirm({
					title:"您确定要删除该机构吗？",
					onOk(){
						deleteOrganization(record.id)
					}
					
				})
			}
		}
	}
	async pageChange(pagination) {
	    await this.props.onPageChange(pagination);
	    this.newPage = pagination.current;
	}
	render(){
		const { list,pagination1,loading } = this.props;
		if(!list){
			return null
		}
		this.filterAry(list,"first")
		const list1 = [];
//		list.map((item,i)=>{
//			if(item.children){
//				item.childrens = item.children
//				delete item.children
//			}
//			item.key = i
//			list1.push(item)
//		})
		const columns = [
			{
				title:'机构名称',
				dataIndex:'name',
				key:"name",
			},{
				title:'创建时间',
				dataIndex:'createdTime',
				key:'createdTime',
				render:(text,record)=>{
					return(
						<p>
							{moment(record.createdTime).format("YY-MM-DD HH:mm:ss")}
						</p>
					)
				}
			},{
				title:'机构编号',
				dataIndex:'number',
				key:'number',
			},{
				title:'机构地址',
				dataIndex:'address',
				key:'address'
			},{
				title:'联系方式',
				dataIndex:'contactWay',
				key:'contactWay'
			},{
				title:'操作',
				dataIndex:'',
				render:(text,record) => {
					return(
						<div>
							<span style={{marginRight:10}} onClick={this.edit.bind(this,record,1)}><a>修改</a></span>							
							{record.canMove?
								<span onClick={this.edit.bind(this,record,2)}><a>移除</a></span>:
								<span onClick={this.edit.bind(this,record,2)}><a>删除</a></span>
							}
						</div>
					)
				}
			}
		]
			
		const rowSelection = {
		  onChange: (selectedRowKeys, selectedRows) => {
		    // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
		  },
		  onSelect: (record, selected, selectedRows) => {
		    // console.log(record, selected, selectedRows);
		  },
		  onSelectAll: (selected, selectedRows, changeRows) => {
		    // console.log(selected, selectedRows, changeRows);
		  },
		};
		
		return(
			<div>
				<h3 style={{fontWeight:600}}>机构管理列表:</h3>
				<Row style={{marginTop:10}} gutter={24} span={24}>
					<Col lg={6} md={3} sm={4} xs={6} style={{ marginBottom: 16 }}>
			            <span>机构名称:&nbsp;&nbsp;</span>
			            <Input
			              placeholder="请输入机构名称关键字"
			              onChange={this.nameChange.bind(this)}
			              style={{ width: 200 }}
			            />
			         </Col>
			         <Col lg={6} md={3} sm={4} xs={6} style={{marginBotton: 16 }}>
			         	<span>机构编号:&nbsp;&nbsp;</span>
			            <Input
			              placeholder="请输入机构编号关键字"
			              onChange={this.numberChange.bind(this)}
			              style={{ width: 200 }}
			            />
			         </Col>
			         <Col lg={6} md={3} sm={4} xs={6} style={{marginBotton: 16 }}>
				         <Button
				              style={{ marginLeft: 10,width:200,height:30 }}
				              type="primary"
				              size="default"
				              onClick={this.searchLeave.bind(this)}
				            >
				              查询
	            			 </Button>
            			 </Col>
				</Row>
				<Button type="dashed" style={{width:"100%",margin:"20px 0",height:40}} onClick={this.add.bind(this)}>
		        		<Icon type="plus" />新增
		      	</Button>
		      	
		      	<Table
				    columns={columns}		    
				    dataSource={list}
				    loading={loading}
				    showHeader={true}
			        onChange={this.pageChange.bind(this)}
			        pagination={pagination1}
				  />
			</div>
		)
	}
}

export default Organization
